<template>
  <!-- 导入表 -->
  <el-drawer v-model="visible" :title="title" :direction="direction" :before-close="handleClose" size="70%">
    <el-row>
      <el-table ref="table" :data="fieldList" @selection-change="handleSelectionChange" height="87vh" stripe
        highlight-current-row border>
        <el-table-column label="序号" align="center" type="index" min-width="60px" />
        <el-table-column label="字段名称" align="left" prop="fieldName" width="160px" />
        <el-table-column label="字段解释" align="left" prop="fieldComment" width="120px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.fieldComment }}</span>
            <el-input v-else v-model="row.editData.fieldComment" />
          </template>
        </el-table-column>
        <el-table-column label="字段类型" align="left" prop="fieldDataType" width="120px" />
        <el-table-column label="JAVA类型" align="left" prop="javaDataType" width="150px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.javaDataType }}</span>
            <el-select v-else v-model="row.editData.javaDataType">
              <el-option label="Long" value="Long" />
              <el-option label="String" value="String" />
              <el-option label="Integer" value="Integer" />
              <el-option label="Double" value="Double" />
              <el-option label="BigDecimal" value="BigDecimal" />
              <el-option label="Date" value="Date" />
              <el-option label="Boolean" value="Boolean" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="JAVA名称" align="left" prop="javaFieldName" width="160px" />
        <el-table-column label="是否插入" align="center" prop="isInsert" width="85px">
          <template #default="{ row }">
            <el-checkbox v-if="!row.editing" disabled true-label="1" false-label="0"
              v-model="row.isInsert"></el-checkbox>
            <el-checkbox v-else true-label="1" false-label="0" v-model="row.editData.isInsert"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="是否编辑" align="center" prop="isEdit" width="100px">
          <template #default="{ row }">
            <el-checkbox v-if="!row.editing" disabled true-label="1" false-label="0" v-model="row.isEdit"></el-checkbox>
            <el-checkbox v-else true-label="1" false-label="0" v-model="row.editData.isEdit"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="是否列表" align="center" prop="isList" width="100px">
          <template #default="{ row }">
            <el-checkbox v-if="!row.editing" disabled true-label="1" false-label="0" v-model="row.isList"></el-checkbox>
            <el-checkbox v-else true-label="1" false-label="0" v-model="row.editData.isList"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="查询方式" align="center" prop="queryType" width="150px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.queryType }}</span>
            <el-select v-else v-model="row.editData.queryType" clearable>
              <el-option value="EQ" label="等于" />
              <el-option value="NE" label="不等于" />
              <el-option value="GT" label="大于" />
              <el-option value="GE" label="大于等于" />
              <el-option value="LT" label="小于" />
              <el-option value="LE" label="小于等于" />
              <el-option value="LIKE" label="模糊匹配" />
              <el-option value="LIKE_LEFT" label="左模糊匹配" />
              <el-option value="LIKE_RIGHT" label="右模糊匹配" />
              <el-option value="IN" label="包含" />
              <el-option value="NOT_IN" label="不包含" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" width="180px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.sort }}</span>
            <el-input-number v-else v-model="row.editData.sort" width="100px" controls-position="right" min="0"
              max="9999" />
          </template>
        </el-table-column>
        <el-table-column label="HTML组件" align="left" prop="component" width="160px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.component }}</span>
            <el-select v-else v-model="row.editData.component" clearable>
              <el-option value="input" label="文本框" />
              <el-option value="number" label="数字框" />
              <el-option value="select" label="下拉选择框" />
              <el-option value="textarea" label="文本域" />
              <el-option value="date" label="日期选择" />
              <el-option value="datetime" label="日期时间选择" />
              <el-option value="time" label="时间选择" />
              <el-option value="checkbox" label="多选" />
              <el-option value="radio" label="单选" />
              <el-option value="file" label="文件" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="默认值" align="left" prop="defaultValue" width="100px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.defaultValue }}</span>
            <el-input v-else v-model="row.editData.defaultValue" />
          </template>
        </el-table-column>
        <el-table-column label="字典代码" align="left" prop="dictCode" width="150px">
          <template #default="{ row }">
            <span v-if="!row.editing">{{ row.dictCode }}</span>
            <el-select v-else v-model="row.editData.dictCode" clearable filterable placeholder="请选择字典">
              <el-option v-for="dict in dictOptions" :key="dict.dictCode" :label="dict.dictName" :value="dict.dictCode">
                <span style="float: left">{{ dict.dictName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictCode }}</span>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="是否主键" align="center" prop="isPrimaryKey" width="85px">
          <template #default="{ row }">
            <el-checkbox disabled true-label="1" false-label="0" v-model="row.isPrimaryKey"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="是否自增" align="center" prop="isAutoIncrement" width="85px">
          <template #default="{ row }">
            <el-checkbox disabled true-label="1" false-label="0" v-model="row.isAutoIncrement"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="是否必填" align="center" prop="isRequired" width="85px">
          <template #default="{ row }">
            <el-checkbox disabled true-label="1" false-label="0" v-model="row.isRequired"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="数据长度" align="center" prop="dataLength" width="100px" />
        <el-table-column label="数据精度" align="center" prop="dataPrecision" width="100px" />
        <el-table-column label="更新时间" align="center" prop="updatedAt" width="180px" /><!-- 操作列 -->
        <el-table-column label="操作" width="160" fixed="right">

          <template #default="{ row, $index }">
            <div v-if="!row.editing">
              <el-button size="small" icon="Edit" @click="handleEdit(row, $index)">修改</el-button>

            </div>
            <div v-else>
              <el-button size="small" type="success" @click="handleSave(row, $index)">保存</el-button>
              <el-button size="small" @click="handleCancel(row, $index)">取消</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-drawer>
</template>

<script setup>
import apiGen from "@/api/tool/genTable";
import apiTableField from "@/api/tool/genTableField";
import apiDict from "@/api/system/dict"


const visible = ref(false);
const ids = ref([]);
const fieldList = ref([]);
const { proxy } = getCurrentInstance();
const title = ref("");
const tableId = ref("");
const dictOptions = ref([]);


/** 查询参数列表 */
function show(row) {
  visible.value = true;
  title.value = row.tableComment + " [" + row.tableName + "]"
  tableId.value = row.id;
  getList();
  
  apiDict.optionselect().then(response => {
    dictOptions.value = response.data;
  })
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
}
/** 查询表数据 */
function getList() {
  apiTableField.list({
    tableId: tableId.value
  }).then(res => {
    fieldList.value = res.data;
  });
}

// 编辑行
const handleEdit = (row, index) => {
  // 先取消其他行的编辑状态
  fieldList.value.forEach(item => {
    if (item.editing) {
      item.editing = false
    }
  })
  // 设置当前行编辑状态
  row.editing = true
  // 备份原始数据
  row.editData = { ...row }
}


// 保存行
const handleSave = (row, index) => {
  // 更新数据
  Object.keys(row.editData).forEach(key => {
    if (key !== 'editing' && key !== 'editData') {
      row[key] = row.editData[key]
    }
  })
  apiTableField.update({
    id: row.id,
    fieldComment: row.editData.fieldComment,
    javaDataType: row.editData.javaDataType,
    isInsert: row.editData.isInsert,
    isEdit: row.editData.isEdit,
    isList: row.editData.isList,
    queryType: row.editData.queryType,
    dictCode: row.editData.dictCode,
    sort: row.editData.sort,
    component: row.editData.component,
    defaultValue: row.editData.defaultValue
  }).then(res => {
    proxy.$message.success("更新成功");
    // 退出编辑状态
    row.editing = false
    // 清空临时数据
    row.editData = {}
  }).catch(err => {
    proxy.$message.error(err.message);
  });
}

// 取消编辑
const handleCancel = (row, index) => {
  // 退出编辑状态
  row.editing = false
  // 清空临时数据
  row.editData = {}
}


defineExpose({
  show,
});
</script>
